<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item v-for="i in breadData" :key="i.path">
      <template v-if="i !== breadData.length - 1">
        <router-link :to="i.path">
          {{ i.meta.title }}
        </router-link>
      </template>
      <template v-else>{{ i.meta.title }}</template>
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script>
export default {
  name: "myBreadcrumb",
  data() {
    return {
      breadData: [],
    };
  },
  watch: {
    $route() {
      this.getBreadData();
    },
  },
  mounted() {
    console.log(this.$route);
    this.getBreadData();
  },
  methods: {
    getBreadData() {
      let breadData = this.$route.matched;
      if (breadData[1].path != "/home") {
        //非首页
        this.breadData = [{ path: "/home", meta: { title: "首页" } }].concat(
          breadData
        );
      } else {
        this.breadData = [{ path: "/home", meta: { title: "首页" } }];
      }
      console.log(this.breadData);
    },
  },
};
</script>

<style></style>
